<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <span v-once>{{a}}</span>
    <div v-html="html"></div>
    <!--html变量里的html代码会被解析为html-->
    <div id="div1">div1</div>
    <div v-bind:id="div2" v-bind:class="class2">div2</div>
    <!--通过data里的属性-->
    {{num+1}}

    <p v-if="seen">现在你看到我了</p>
    <!--app.seen=true -->


    <a v-bind:href="url">link</a>
    <a :href="url">link</a> <!--缩写-->

    <div>
        <a v-on:click="doSomething">doSomething</a>
        <a @click="doSomething">doSomething</a>
    </div>

    <div @click="click1">
        <div @click.stop="click2">click2</div>
        <!--.stop 防止向上冒泡  .prevent-->

    </div>


</div>

<script>
   let app= new Vue({
        el:'#app',
        data:{
            a:1,
            html:"<span style='color: red'>123</span>",
            div2:'d2',
            class2:'cl2',
            num:100,
            seen:false,
            url:'https://www.lepu.cn',

        },
       methods:{
           doSomething(){
               console.log('dosth')
           },
           click1:function(){
               console.log('click1')
           },
           click2:function(){
               console.log('click2')
           }
       }
    })
</script>

</body>
</html>